<template>
  <view class="page">
    <view style="padding-top:260rpx;">
      <view style="height:80px;">
        <view class="login-input flex align-end" :class="{active:distinguish}">
          <view class="cuIcon-people text-white text-xl margin-bottom-sm"></view>
          <input type="text" placeholder="请输入当前账号" v-model="From.UserName" placeholder-style="color:#fff"/>
          <view v-if="From.UserName" class="cuIcon-roundclose text-white text-xl margin-bottom-sm" @tap="() => From.UserName = ''"></view>
        </view>
        <text class="tips" v-show="distinguish">{{ UserNametips }}</text>
      </view>

      <view style="height:80px;">
        <view class="login-input flex align-end" :class="{active:distinguish}">
          <view class="cuIcon-lock text-white text-xl margin-bottom-sm"></view>
          <input type="password" placeholder="请输入当前密码" v-model="From.PassWord" placeholder-style="color:#fff" v-if="SwiTch"/>
          <input type="text" placeholder="请输入当前密码" placeholder-style="color:#fff" v-model="From.PassWord" v-else/>
          <view v-if="From.PassWord" class="cuIcon-roundclose text-white text-xl margin-bottom-sm margin-right" @tap="() => From.PassWord = ''"></view>
          <view class="cuIcon-attention text-white text-xl margin-bottom-sm" @tap="Switch"></view>
        </view>
        <text class="tips" v-show="distinguish">{{ PassWordtips }}</text>
      </view>
    </view>
    <view class="login-button">
      <text class="text-white">
        <radio :checked="checked" @click="clickchecked" style="transform:scale(0.7)"></radio>记住密码
      </text>
      <text class="register" @click="Jump">暂无账号点击注册</text>
      <button @click="login">点击登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useSystemStore } from '@/store/modules/system' // 使用 Pinia 仓库（根据 main.js 中 pinia 配置）

/* 响应式数据声明 */
const From = reactive({
  UserName: '',
  PassWord: ''
})
const checked = ref(false)
const distinguish = ref(false)
const UserNametips = ref('')
const PassWordtips = ref('')
const SwiTch = ref(true)

/* 生命周期：页面显示时读取本地存储 */
onShow(() => {
  uni.getStorage({
    key: 'UserInfo',
    success: (e) => {
      From.UserName = e.data?.UserName || ''
      From.PassWord = e.data?.PassWord || ''
    }
  })
})

/* 登录逻辑 */
const login = () => {
  distinguish.value = false
  if (From.UserName && From.PassWord) {
    // 改为调用仓库中的登录接口（根据 system.js 中的 login 方法）
    const store = useSystemStore()
    store.login({
      params: { username: From.UserName, password: From.PassWord, grant_type: 'password' },
      config: { loading: true }
    }).then(() => {
      uni.reLaunch({ url: '/pages/index/home' })
    }).catch(() => {
      UserNametips.value = '账号或密码错误'
      PassWordtips.value = '账号或密码错误'
      distinguish.value = true
    })
  } else {
    UserNametips.value = '账号不能为空'
    PassWordtips.value = '密码不能为空'
    distinguish.value = true
  }
}

/* 记住密码逻辑 */
const clickchecked = () => {
  checked.value = !checked.value
  if (checked.value) {
    if (From.UserName && From.PassWord) {
      uni.setStorage({
        key: 'UserInfo',
        data: { UserName: From.UserName, PassWord: From.PassWord }
      })
    }
  }
}

/* 跳转注册页 */
const Jump = () => {
  uni.reLaunch({ url: '../register/index' })
}

/* 密码显示切换 */
const Switch = () => {
  SwiTch.value = !SwiTch.value
}
</script>

<style lang="scss" scoped>
/* 样式与 Vue2 完全兼容 */
.page {
  width: 100%;
  height: 100%;
  background-image: url(../../static/images/design03.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-input {
  width: 85%;
  height: 63px;
  margin: 0px auto;
  border-bottom: 1px solid rgb(255, 255, 255);

  input {
    width: 91%;
    border: none;
    height: 40px;
    color: rgb(255, 255, 255);
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    outline: none;
    -webkit-appearance: none; /*去除系统默认的样式*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
  }
}

.login-button {
  width: 85%;
  margin: 0px auto;

  button {
    width: 100%;
    font-size: 15px;
    height: 40px;
    color: rgb(255, 255, 255);
    background-color: rgb(78, 110, 242);
    margin-top: 16px;
  }

  radio {
    font-size: 14px;
    color: rgb(255, 255, 255);
  }

  .register {
    font-size: 12px;
    color: rgb(255, 255, 255);
    float: right;
    padding-top: 10px;
    text-decoration: underline;
  }
}

.active {
  color: rgb(245, 8, 8);
  border-bottom: 1px solid rgb(245, 8, 8);
}

.tips {
  color: rgb(245, 8, 8);
  font-size: 12px;
  display: initial;
  float: right;
  padding-right: 30px;
}

.text-xl {
  font-size: 34rpx !important;
}

.margin-bottom-sm {
  margin-bottom: 24rpx !important;
}
</style>